import { Component, OnInit } from '@angular/core';
import { DashboardService, Menu } from './dashboard.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.sass']
})
export class DashboardComponent implements OnInit {
  menus = [];
  menu_colors: Array<string> = [];
  colorIndex = 0;

  constructor(private service: DashboardService) { }

  ngOnInit(): void {
    this.service.getMenuColors().subscribe(data => this.menu_colors = data);
    this.service.getMenus().subscribe((menus: Array<Menu>): void => {
      menus.forEach(item => item.bgColor = this._randomColor());
      this.menus = menus;
    });

  }

  private _randomColor = (): string => {
    const color = this.menu_colors[this.colorIndex];
    this.colorIndex++;
    if (this.colorIndex === this.menu_colors.length) { this.colorIndex = 0 }
    return color;
  }

}
